După cum am văzut în articolele anterioare, paginile unui document HTML (site) pot conține trimiteri către alte resurse (pagini, fișiere, etc) accesibile prin Internet. O astfel de trimitere se numește în engleză "link" și se poate realiza dacă se cunoaște URL-ul resursei respective. Aceste legături se vor introduce în pagină folosind marcajul <a></a>.

Este important să înțelegeți că o astfel de legătură are două capete, și o direcție. Legătura începe de la o sursă și indică către o destinație care poate fi orice resursă web (imagine, fișier audio, video, pagină HTML, un element dintr-o pagină HTML, etc). O să vedem în acest articol că eticheta <a> se poate folosi pentru a defini atât sursa cât și destinația unei astfel de legături.

Odată definită o legătură, comportamentul implicit asociat activării acesteia (prin click cu mouse-ul, folosind tastatura, prin comandă vocală, etc) este încărcarea în browser a resursei spre care indică.

Conținutul cuprins între etichetele <a> și </a> poate fi un text, sau o imagine, sau ambele. De obicei, dacă nu i se schimbă înfățișarea folosind CSS, textul sau imaginea respectivă vor apărea în pagină astfel:

Standardul HTML 4.01 nu permite imbricarea marcajelor <a></a> (un element <a> nu poate conține alt element <a>).

Câteva dintre atributele posibile ale elementului <a> sunt:

Imaginile de mai jos prezintă câteva exemple de folosire a acestui element:

realizare legaturi - exemplul 1

Exemple de realizare legături și modul lor de afișare în Mozilla Firefox 3.6.2

În exemplele de mai sus fiecare element <a> definește atât sursa (textul din pagina curentă care este cuprins între etichetele <a> și </a>) cât și destinația (indicată prin valoarea atributului href).

Puteți defini ca destinații și zone din pagina curentă sau din altele. Pentru aceasta vom folosi marcajul <a> de două ori: o dată pentru a defini sursa, punctul de plecare al link-ului și apoi pentru a defini destinația, zona care va fi încărcată în browser.

Destinația se definește folosind sintaxa: <a id="xxx">Text ... </a> sau <a name="xxx">Text ... </a>. În acest context se pot folosi oricare dintre atributele name și id. Se recomanda folosirea atributului id deoarece acesta este utilizat și pentru a realiza conexiunea cu CSS sau JavaScript. xxx reprezintă numele destinației. Acest nume trebuie să fie unic - nu este permis să existe două elemente cu același id. Este permisă folosirea ambelor atribute în același element. Dacă acest lucru se întâmplă atunci valorile lor trebuie să fie egale, de ex. <a id="a1" name="a1">Text ... </a>. Valoarea din atributul id trebuie sa înceapă cu o literă (a–z sau A–Z); aceasta poate fi urmată doar de litere (a–z sau A–Z), cifre (0–9), liniuță (-), subliniere (_), două puncte (:), sau punct (.). O destinație astfel definită nu este evidențiată de browser în nici un fel. Ca observație menționăm că aproape orice element HTML poate avea atributul id și, în caz că-l are, poate servi ca destinație a unei legături (vezi exemplele de mai jos).

Sursa se definește folosind sintaxa: <a href="#xxx"> Text ... <a/> unde xxx reprezintă id-ul destinației care va fi încărcată de browser, iar Text ... reprezintă textul care trebuie activat pentru a ajunge la destinație (legătura).

Exemple:

Exemple realizare legături HTML

Exemple de realizare a legăturilor către porțiuni de pagină și modul lor de afișare în Mozilla Firefox 3.6.3

Atributul target se poate folosi pentru a indica browserului că resursa spre care se face legătura trebuie încărcată într-o nouă fereastră a browserului. Sintaxa este: <a href="http://google.ro" target="_blank"> Text link </a>. În acest exemplu, dacă legătura este activată pagina de la Google va fi încărcată într-o fereastră nouă.

Webliografie: